import React, { Component } from 'react'
import { Modal, Table, Form, Input } from 'antd'
import PropTypes from 'prop-types'

import Style from './orderDeliveryModal.css'

const { Item } = Form
const formItemLayout = {
  labelCol: { span: 5 },
  wrapperCol: { span: 16 }
}

class orderDeliveryModal extends Component {
  static propTypes = {
    visible: PropTypes.bool,
    onCancel: PropTypes.func,
    childOrderList: PropTypes.array,
    form: PropTypes.object,
    hendleShowDeliveredInfoModal: PropTypes.func
  }

  constructor (props) {
    super(props)
    this.state = {
      goodsInfoCol: [
        {
          title: '商品图片',
          // dataIndex: 'converImgUrl',
          key: 'converImgUrl',
          render: record => (
            <img className={Style['goods-img']} src={record.converImgUrl} alt='img' />
          )
        },
        {
          title: '商品名称',
          dataIndex: 'commodityName'
        },
        {
          title: '价格/货号',
          dataIndex: 'commodityNo'
        },
        {
          title: '属性',
          dataIndex: 'commoditySpec'
        },
        {
          title: '数量',
          dataIndex: 'quantity'
        },
        {
          title: '小计',
          dataIndex: 'commodityPrice'
        },
        {
          title: '操作',
          render: record => {
            return (
              <>
                {record.orderStatus === '10' && <a className={Style['a-btn']} onClick={() => this.handleShowModal(record.childOrderId)}>发货</a>}
                {!!record.deliveredNo && <a className={Style['a-btn']} onClick={() => this.handleShowDeliveredInfoModal(record.deliveredNo)}>已发货</a>}
              </>
            )
          }
        }
      ],
      showSendModal: false,
      selectedRowKeys: [],
      selected: []
    }
  }

  handleShowModal = (id) => {
    const { selectedRowKeys } = this.state
    let temp
    if (selectedRowKeys && selectedRowKeys.length) {
      temp = selectedRowKeys
    } else {
      temp = [id]
    }
    this.setState({
      showSendModal: true,
      selected: temp
    })
  }

  handleCancel = () => {
    const { form } = this.props
    form.resetFields()
    this.setState({
      showSendModal: false,
      selected: []
    })
  }
  handleBigCancel = () => {
    const { onCancel } = this.props
    this.setState({
      selectedRowKeys: []
    })
    onCancel()
  }
  handleShowDeliveredInfoModal = val => {
    const { handleShowDeliveredInfoModal } = this.props
    handleShowDeliveredInfoModal(val)
  }

  handleConfirm = () => {
    const { selected } = this.state
    const { form, onOk } = this.props
    form.validateFields((err, values) => {
      if (!err) {
        onOk({
          // TODO 发货单流水号
          ...values,
          childOrderIds: selected
        }, () => {
          // FIXME 返回时不会刷新商品信息
          this.handleCancel()
        })
      }
    })
  }

  onSelectChange = (selectedRowKeys, selectedRows) => {
    this.setState({
      selectedRowKeys
    })
  }

  render () {
    const { goodsInfoCol, showSendModal } = this.state
    const { visible, childOrderList, form } = this.props
    const { getFieldDecorator } = form
    const rowSelection = {
      selectedRowKeys: this.state.selectedRowKeys,
      onChange: this.onSelectChange
      // TODO 需要通过已发货来判断无法选中 或 没有发货按钮
      // getCheckboxProps: record => ({
      //   disabled: record.disabled
      // })
    }
    return (
      <>
        <Modal
          title='部分发货'
          width='1148px'
          visible={visible}
          footer={false}
          onCancel={this.handleBigCancel}
          // onOk={this.handleSubmit}
        >
          <Table
            rowKey='childOrderId'
            columns={goodsInfoCol}
            pagination={false}
            dataSource={childOrderList}
            rowSelection={rowSelection}
          />
        </Modal>
        <Modal title='填写物流信息' visible={showSendModal} onCancel={this.handleCancel} onOk={this.handleConfirm} >
          <Form {...formItemLayout}>
            <Item label='物流公司'>
              {getFieldDecorator('logisticsName', {
                rules: [{ required: true, message: '请输入物流公司' }]

              })(
                <Input placeholder='请输入' />
              )}
            </Item>
            <Item label='物流单号'>
              {getFieldDecorator('logisticsNo', {
                rules: [{ required: true, message: '请输入物流单号' }]
              })(<Input placeholder='请输入' />)}
            </Item>
          </Form>
        </Modal>
      </>
    )
  }
}

export default Form.create()(orderDeliveryModal)
